<template>
  <div>
    <!-- 摄像头状态 -->
    <div class="all-camera">
      <div v-for="(item, index) in cameraList" :key="index" class="camera_icon">
        <el-tooltip
          :content="`摄像头${item.id}${item.status == 1 ? '在线' : '离线'}`"
          effect="light"
          placement="bottom"
        >
          <div class="single">
            <!-- 在线摄像头 -->
            <svg
              t="1752730893335"
              class="icon camera_image"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="6229"
              width="128"
              height="128"
              v-if="item.status == 1"
            >
              <path
                d="M727.137051 421.398925a217.179701 217.179701 0 1 0-217.164418 217.026866 217.363104 217.363104 0 0 0 217.164418-217.026866z m-373.026388 0a155.892537 155.892537 0 1 1 155.892537 155.785553 155.999522 155.999522 0 0 1-155.892537-155.785553z m256.764179 0a100.871642 100.871642 0 1 0-100.871642 100.871642 101.009194 101.009194 0 0 0 100.886925-100.871642z m-140.608955 0a39.615045 39.615045 0 1 1 39.615044 39.584478 39.660896 39.660896 0 0 1-39.523343-39.584478z m152.025791 465.87415V796.274627A405.733254 405.733254 0 1 0 106.272096 406.084776a395.844776 395.844776 0 0 0 301.48394 391.565373v91.181851a8.803343 8.803343 0 0 1-1.253254-0.091701h-2.506507c-90.173134 15.283582-178.282985 43.22197-178.282985 103.714388a31.040955 31.040955 0 0 0 30.246209 31.484179 29.757134 29.757134 0 0 0 30.399044-29.848836c6.037015-14.748657 84.472358-51.765493 233.838806-51.765493s227.908776 37.07797 233.747105 50.435821a30.643582 30.643582 0 1 0 61.287164 0c0.061134-63.946507-97.448119-93.856478-192.848239-105.487283zM165.052752 406.084776a344.919881 344.919881 0 1 1 344.919881 344.751761A345.240836 345.240836 0 0 1 165.052752 406.084776z m396.012896 476.022448a743.699104 743.699104 0 0 0-38.331224-1.039284c-17.19403 0-38.31594 0.580776-53.645373 1.895164v-70.824119h91.976597v69.968239z"
                fill="#1296db"
                p-id="6230"
              ></path>
            </svg>
            <!-- 离线摄像头 -->
            <svg
              t="1752730893335"
              class="icon camera_image"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="6229"
              width="128"
              height="128"
              v-else-if="item.status == 2"
            >
              <path
                d="M727.137051 421.398925a217.179701 217.179701 0 1 0-217.164418 217.026866 217.363104 217.363104 0 0 0 217.164418-217.026866z m-373.026388 0a155.892537 155.892537 0 1 1 155.892537 155.785553 155.999522 155.999522 0 0 1-155.892537-155.785553z m256.764179 0a100.871642 100.871642 0 1 0-100.871642 100.871642 101.009194 101.009194 0 0 0 100.886925-100.871642z m-140.608955 0a39.615045 39.615045 0 1 1 39.615044 39.584478 39.660896 39.660896 0 0 1-39.523343-39.584478z m152.025791 465.87415V796.274627A405.733254 405.733254 0 1 0 106.272096 406.084776a395.844776 395.844776 0 0 0 301.48394 391.565373v91.181851a8.803343 8.803343 0 0 1-1.253254-0.091701h-2.506507c-90.173134 15.283582-178.282985 43.22197-178.282985 103.714388a31.040955 31.040955 0 0 0 30.246209 31.484179 29.757134 29.757134 0 0 0 30.399044-29.848836c6.037015-14.748657 84.472358-51.765493 233.838806-51.765493s227.908776 37.07797 233.747105 50.435821a30.643582 30.643582 0 1 0 61.287164 0c0.061134-63.946507-97.448119-93.856478-192.848239-105.487283zM165.052752 406.084776a344.919881 344.919881 0 1 1 344.919881 344.751761A345.240836 345.240836 0 0 1 165.052752 406.084776z m396.012896 476.022448a743.699104 743.699104 0 0 0-38.331224-1.039284c-17.19403 0-38.31594 0.580776-53.645373 1.895164v-70.824119h91.976597v69.968239z"
                fill="#8a8a8a"
                p-id="6230"
              ></path>
            </svg>
            <span class="camera-num">{{ index + 1 }}</span>
          </div>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

onMounted(() => {});

const cameraList = ref([
  {
    id: 1,
    name: "camera1",
    status: "normal",
    status: 1,
  },
  {
    id: 2,
    name: "camera2",
    status: "normal",
    status: 2,
  },
  {
    id: 3,
    name: "camera3",
    status: "normal",
    status: 2,
  },
  {
    id: 4,
    name: "camera4",
    status: 1,
  },
  {
    id: 5,
    name: "camera4",
    status: 2,
  },
]);
</script>

<style scoped lang="scss">
.all-camera {
  border: 0.1rem solid #ccc;
  border-radius: 0.5rem;
  @apply w-[100%] h-full  flex justify-around items-center overflow-hidden box-border;
  .single {
    @apply w-[1.5rem] h-full flex flex-col items-center justify-around  py-[0.1rem];
    &:hover {
      @apply bg-[#ccc] rounded-sm cursor-default;
    }
  }
}
.camera_icon {
  @apply h-full flex justify-center items-center text-[0.8rem];
}

.camera_image {
  @apply w-[0.8rem] h-[0.8rem];
}
.camera-num {
  @apply text-[0.5rem];
}
</style>